<template>
  <div class="cover-image-preview-module">
    <van-image
      width="100%"
      height="100%"
      :lazy-load="true"
      :src="$parseAssets(url)"
      @click="showImageHandle"
    />
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import { isBlank, isArray, isString } from "@/utils/dataType.js";

export default {
  components: {},
  props: {
    url: {
      type: [String, Array],
      default: ""
    }
  },
  data() {
    return {
      imgList: []
    };
  },
  created() {},
  mounted() {
    this.initHandle();
  },
  methods: {
    // 初始化
    initHandle() {
      // eslint-disable-next-line
      console.log(this.url, this.imgList);
      if (isBlank(this.url)) return;
      // 类型判断
      if (isString(this.url)) {
        // 校验
        let formatUrl = "";
        formatUrl = this.$parseAssets(this.url);
        this.imgList.push(formatUrl);
        // eslint-disable-next-line
        console.log(formatUrl, this.url, this.imgList);
      }
    },
    // 图片预览
    showImageHandle() {
      ImagePreview({
        images: this.imgList,
        closeOnPopstate: true,
        closeable: true
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.cover-image-preview-module {
  height: 100%;
}
</style>
